import {
  createBottomTabNavigator,
  createStackNavigator,
  createAppContainer,
} from 'react-navigation';
import React from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    Button,
    Image,
    View,
    TouchableOpacity
} from 'react-native';
import RootStack from './Menu'



class HomeDetailsScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>HomeDetails!</Text>
      </View>
    );
  }
}

//class SettingsDetailsScreen extends React.Component {
//  render() {
//    return (
//      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
//        <Text>SettingsDetails!</Text>
//      </View>
//    );
//  }
//}

class HomeScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        {/* other code from before here */}
        <Button
          title="Go to HomeDetails"
          onPress={() => this.props.navigation.navigate('HomeDetails')}
        />
      </View>
    );
  }
}

//class SettingsScreen extends React.Component {
//  render() {
//    return (
//      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
//        {/* other code from before here */}
//        <Button
//          title="Go to SettingsDetails"
//          onPress={() => this.props.navigation.navigate('SettingsDetails')}
//        />
//      </View>
//    );
//  }
//}

const HomeStack = createStackNavigator({
  Home: HomeScreen,
  HomeDetails: HomeDetailsScreen,
});

//const SettingsStack = createStackNavigator({
//  Settings: SettingsScreen,
//  SettingsDetails: SettingsDetailsScreen,
//});

const AppMainTab=createAppContainer(createBottomTabNavigator(
  {
    Home: HomeStack,
//    Settings: SettingsStack,
    diy:RootStack,
  },
  {
    /* Other configuration remains unchanged */
  }
));

export default AppMainTab